<template>
  <div class="datepicker-item component-item">
    <label :style="{width: data.config.labelWidth}">{{data.config.labelName}}</label>
    <DatePicker
      :value="view ? value : data.value"
      :type="data.config.type"
      :size="data.config.size"
      :placeholder="data.config.placeholder"
      :disabled="data.config.disabled"
      :readonly="pageType==='result' ? true : false"
      :format="data.config.format"
      @on-change="changeValue"
    />
  </div>
</template>

<script>
import { getSourceData } from '../common'
export default {
  props: ['data', 'index', 'file', 'pageType'],
  data () {
    return {
      value: ''
    };
  },
  watch: {
    'file.result': {
      handler () {
        this.dataHandle();
      }
    }
  },
  methods: {
    // 数据处理
    dataHandle () {
      this.value = ''
      if (this.file) {
        let { databinding, key, saveResult } = this.data;
        if (databinding) {
          try {
            let value = getSourceData(this.file, databinding);
            this.value = value;
            this.changeValue(this.value)
          } catch (e) {
            console.log(e);
            this.$Message.error('数据获取出错');
          }
        }
        let { isDefaultData, result } = this.file
        // 值的获取
        if (!isDefaultData && saveResult) {
          this.value = result[key]
          this.changeValue(this.value)
        }
      }
    },
    // 数据更新
    changeValue (value) {
      this.$emit('updateResult', {
        value,
        index: this.index
      });
    }
  },
  created () {
    this.dataHandle();
  }
};
</script>

<style lang="less" scoped>
.component-item {
  position: relative;
  label.component-label {
    display: inline-block;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 32px;
  }
}
</style>
